<template>
	<div class="flx-col">
		<div class="loginIn-area">
			<div class="user-flex1">
				<div class="user-name">
					{{ $store.state.user.replaceName }}
				</div>
				<div class="user-link">
					<a href="/user/personalData">账号管理</a>
					<span>|</span>
					<a @click.stop="logOut">退出</a>
				</div>
			</div>
			<div class="user-flex2">
				<div class="user-id">
					ID：{{ $store.state.user.account }}
				</div>
				<div class="user-type">
          {{$store.state.user.levelName}}
				</div>
			</div>
			<div class="user-flex3">
				<div class="user-col">
					<div class="user-item">
            我的域名：<a href="/user/mydn">{{$store.state.user.domainCount}}</a> 个
					</div>
					<div class="user-item">
            我的订单：<a href="/user/myorder">{{$store.state.user.orderCount}}</a> 个
					</div>
				</div>
				<div class="user-col">
					<div class="user-item">
            预订中：<a href="/user/mybookings">{{$store.state.user.bookingCount}}</a>个
					</div>
					<div class="user-item">
            竞价中：<a href="/user/mybiddings">{{$store.state.user.biddingCount}}</a>个
					</div>
				</div>
			</div>
			<div class="user-flex4">
				<div class="user-amount">
					<div class="user-balance">
						可用余额：<span>￥{{ $store.state.user.balance }}</span>
					</div>
					<div class="user-freeze">
						冻结中：<span>￥{{$store.state.user.freeze}}</span>
					</div>
				</div>
				<div class="user-recharge">
					<a href="/user/recharge">充值</a>
				</div>
			</div>
		</div>
		<!-- <div class="top-area flx-row-s-c">
			<div class="user-box-avatar default-avatar"></div>
			<div>
				<div>
					<div class="flx-row-s-c">
						<span class="f-16 c-o f-w-600 userName">{{
              $store.state.user.nickname
                ? $store.state.user.nickname
                : $store.state.user.account
            }}</span>
						<router-link v-if="!other" to="/user/personalData"
							class="c-b f-14 font-button">修改用户名</router-link>
						<a v-else href="/user/personalData" style="color: #a0a0a0" class="f-14 font-button">修改用户名</a>
					</div>
					<span style="color: #a0a0a0; line-height: 36px">ID:{{ $store.state.user.account }}</span>
				</div>

				<div class="middle-area flx-row-bw-c">
					<div class="f-d2 f-14">
						<span style="color: #a0a0a0"> 余额： </span>
						<span class="pub-font-16 c-r f-w-600"
							style="margin-left: 10px">￥{{ $store.state.user.balance }}</span>
					</div>
					<router-link v-if="!other" to="/user/recharge"
						class="user-strong-button button-size">充值</router-link>
					<a v-else href="/user/recharge" class="user-strong-button button-size">充值</a>
				</div>
			</div>
		</div>
		<div class="button-area flx-row-c-c" @click.stop="logOut">
			<span class="f-14 c-black">安全退出</span>
		</div> -->
	</div>
</template>

<script>
	import {
		logOut
	} from "@/api/user";
	import {
		changelocation
	} from "@/utils/location.js";
	import {
		mapActions,
		mapMutations
	} from "vuex";
	export default {
		name: "VipUsebox",
		props: {
			other: {
				type: Boolean,
				default: false,
			},
			colorType: {
				type: [String, Number],
				default: 0,
			},
		},
		data() {
			return {};
		},
		mounted() {},
		methods: {
			...mapActions(["removeUserData"]),
			...mapMutations(["setToken"]),

			async logOut() {
				const res = await logOut();
				if (res.code == 200) {
					this.setToken({
						accessToken: "",
						refreshToken: "",
						expiration: 0,
						expiresIn: 0,
					});
					this.removeUserData();
					this.$Message.warning("退出登录成功！");
					setTimeout(() => {
						window.location.href =
							changelocation("/login") + "?returnUrl=" + window.location.pathname;
					}, 1000);
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.loginIn-area {
		width: 300px;
		background: #fff;
		font-size: 16px;
		border-radius: 6px;
		padding: 20px 15px 15px;
	}

	.user-flex1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.user-name {
		font-size: 16px;
		color: #333;
	}

	.user-link a {
		font-size: 16px;
		color: #333;
	}

	.user-link a:hover {
		color: #F68A0C;
	}

	.user-link span {
		font-size: 14px;
		color: #999;
		margin: 0 5px;
	}

	.user-flex2 {
		display: flex;
		align-items: center;
		margin: 10px 0;
	}

	.user-id {
		font-size: 16px;
		color: #999;
	}

	.user-type {
		margin-left: 10px;
		font-size: 16px;
		color: #333;
	}

	.user-flex3 {
		display: flex;
	}

	.user-col {
		width: 50%;
	}

	.user-col:nth-child(2) {
		border-left: 1px solid #D3D3D3;
		padding-left: 15px;
	}

	.user-item {
		font-size: 16px;
		color: #333;
		line-height: 2;
	}

	.user-item a {
		color: #F68A0C;
	}

	.user-item a:hover {
		color: #F27202;
	}

	.user-flex4 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 15px;
	}

	.user-balance {
		font-size: 16px;
		color: #333;
	}

	.user-balance span {
		color: #F68A0C;
	}

	.user-freeze {
		font-size: 16px;
		color: #333;
	}

	.user-freeze span {
		color: #999;
	}

	.user-recharge a {
		width: 90px;
		height: 40px;
		display: block;
		background-color: #F68A0C;
		text-align: center;
		line-height: 40px;
		border-radius: 10px;
		color: #fff;
	}

	.user-recharge a:hover {
		background-color: #F27202;
	}
</style>
